<template>
  <div class="appcontainer">
    <div class="toptips">
      <span style="font-size: 18px;margin-right: 26px;" v-if="language == 'zh'">筛选</span>
      <span style="font-size: 18px;margin-right: 26px;" v-else>filter</span>
      <div style="display: flex;align-items: center;">
        <img src="../../../img/alarm.png" alt="" style="width: 12px;height: 12px;margin-right: 7px;">
        <span style="color: #999;font-size: 14px;" v-if="language == 'zh'">如果留空筛选器将不被使用</span>
        <span style="color: #999;font-size: 14px;" v-else>If left blank, the filter will not be used</span>
      </div>
    </div>
    <div class="searchContent" v-if="language == 'zh'">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
        <el-form-item label="基因标志物" prop="geneticMarkers">
          <el-input v-model="queryParams.geneticMarkers" placeholder="请输入基因标志物" clearable
            @keyup.enter.native="handleQuery" style="width: 400px;" size="small" />
        </el-form-item>
        <el-form-item label="差异基因个数" prop="startGs">
          <el-input v-model="queryParams.startGs" placeholder="请输入个数" clearable @keyup.enter.native="handleQuery"
            style="width: 170px;" size="small" type="number" min="0" />
          <span> - </span>
          <el-input v-model="queryParams.endGs" placeholder="请输入个数" clearable @keyup.enter.native="handleQuery"
            style="width: 170px;" size="small" type="number" min="0" />
        </el-form-item>
        <el-form-item label="打分" prop="startFs">
          <el-input v-model="queryParams.startFs" placeholder="请输入分数" clearable @keyup.enter.native="handleQuery"
            style="width: 170px;" size="small" type="number" min="0" />
          <span> - </span>
          <el-input v-model="queryParams.endFs" placeholder="请输入分数" clearable @keyup.enter.native="handleQuery"
            style="width: 170px;" size="small" type="number" min="0" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
            style="margin-left: 10px;">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="searchContent" v-else>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="250px">
        <el-form-item label="Genetic markers" prop="geneticMarkers">
          <el-input v-model="queryParams.geneticMarkers" placeholder="Please enter genetic markers" clearable
            @keyup.enter.native="handleQuery" style="width: 400px;" size="small" />
        </el-form-item>
        <el-form-item label="Number of differentially expressed genes" prop="startGs">
          <el-input v-model="queryParams.startGs" placeholder="Please enter the number" clearable
            @keyup.enter.native="handleQuery" style="width: 170px;" size="small" type="number" min="0" />
          <span> - </span>
          <el-input v-model="queryParams.endGs" placeholder="Please enter the number" clearable
            @keyup.enter.native="handleQuery" style="width: 170px;" size="small" type="number" min="0" />
        </el-form-item>
        <el-form-item label="Scoring" prop="startFs">
          <el-input v-model="queryParams.startFs" placeholder="Please enter the score" clearable
            @keyup.enter.native="handleQuery" style="width: 170px;" size="small" type="number" min="0" />
          <span> - </span>
          <el-input v-model="queryParams.endFs" placeholder="Please enter the score" clearable
            @keyup.enter.native="handleQuery" style="width: 170px;" size="small" type="number" min="0" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
            style="margin-left: 10px;">search</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">reset</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableContent" v-if="language == 'zh'">
      <el-table v-loading="loading" :data="tableList" @sort-change="handleSortData">
        <el-table-column label="基因标志物" align="center" header-align="center" prop="geneticMarkers" sortable="custom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="差异个数" align="right" header-align="center" prop="differencesNum" sortable="custom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="打分" align="right" header-align="center" prop="scoring" sortable="custom" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <div class="tableContent" v-else>
      <el-table v-loading="loading" :data="tableList" @sort-change="handleSortData" empty-text="No data available at the moment">
        <el-table-column label="Genetic markers" align="center" header-align="center" prop="geneticMarkers" sortable="custom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="Number of differences" align="right" header-align="center" prop="differencesNum" sortable="custom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="Scoring" align="right" header-align="center" prop="scoring" sortable="custom" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HospitalwebsiteSwbzwzydzl',

    data() {
      return {
        queryParams: {
          pageNum: 1,  //必填
          pageSize: 10,  //必填
          dataLanguage: null,  //非必填-中英文
          geneticMarkers: null,  //非必填-基因标志物
          sortField: null,  //非必填-排序字段
          startGs: null,  //非必填-个数区间 
          endGs: null,  //非必填-个数区间
          startFs: null,  //非必填-分数区间
          endFs: null,  //非必填-分数区间
        },
        language: '',
        tableList: [],
        total: 0,
        loading: true,
      };
    },
    created() {
      this.language = sessionStorage.getItem('language')
      window.addEventListener('setItem', this.languages);
      this.getList()
    },
    mounted() {

    },
    methods: {
      // 监听session中language的变化
      languages(e) {
        console.log(e, 8888888888888)
        this.language = sessionStorage.getItem('language')
        console.log(this.language, 5555555555)
      },
      getList() {
        this.loading = true
        var query = {
          pageNum: this.queryParams.pageNum,  //必填
          pageSize: this.queryParams.pageSize,  //必填
          dataLanguage: this.dataLanguage,  //非必填-中英文
          geneticMarkers: this.queryParams.geneticMarkers,  //非必填-基因标志物
          sortField: this.queryParams.sortField,  //非必填-排序字段
          startGs: this.queryParams.startGs,  //非必填-个数区间 
          endGs: this.queryParams.endGs,  //非必填-个数区间
          startFs: this.queryParams.startFs,  //非必填-分数区间
          endFs: this.queryParams.endFs,  //非必填-分数区间
        }
        this.axios
          .get('/chronic/calculation/list', { params: query }).then(res => {
            if (res.data.code == 200) {
              this.tableList = res.data.rows
              this.total = res.data.total
            }
            this.loading = false
          })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = {
          pageNum: 1,  //必填
          pageSize: 10,  //必填
          dataLanguage: this.language,  //非必填-中英文
          geneticMarkers: null,  //非必填-基因标志物
          sortField: null,  //非必填-排序字段
          startGs: null,  //非必填-个数区间 
          endGs: null,  //非必填-个数区间
          startFs: null,  //非必填-分数区间
          endFs: null,  //非必填-分数区间
        }
        this.handleQuery();
      },
      // 排序
      handleSortData(v) {
        let prop = v.prop;
        prop = prop.replace(/([A-Z])/g, "_$1").toLowerCase();
        if (prop[0] == "_") {
          prop = prop.slice(1);
        }
        let order = "";
        if (v.order) {
          order = v.order.slice(0, -6);
        }
        if (order) {
          this.queryParams.sortField = prop + " " + order;
        } else {
          this.queryParams.sortField = ""
        }
        this.handleQuery()
      },
    },
    beforeDestroy() {
      this.language = null
      window.removeEventListener('setItem', this.languages);
    },
  };
</script>
<style scoped>
  .appcontainer {
    width: 100%;
    background-color: #fff;
  }

  .toptips {
    width: 100%;
    margin-bottom: 14px;
    padding: 14px 20px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    align-items: center;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  }
</style>